<!--
 * @Author: LAB
 * @Date: 2021-05-18 11:40:44
 * @Description: 存储限量设置
 * @FilePath: \client-app\src\views\storeroom\store-length.vue
-->
<template>
  <div class="grup-body">
    <div>
      <div class="flex">
        <div>
          <VerticalTabs />
        </div>
        <DxSortable
          filter=".dx-row-lines"
          group="shared"
          data="listData"
          :allow-drop-inside-item="true"
          @drag-end="onDragEnd"
        >
          <div style="width: calc(50vw); margin-top: 20px">
            <DxTabs
              :data-source="settingTabs"
              v-model:selected-index="openTab"
            />
            <HisToolBar />
          </div>
          <div style="width: calc(100vw - 60px)">
            <DrugLengthBase></DrugLengthBase>
          </div>
        </DxSortable>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { ApiTool } from "@/api/api-tool";
import { Inject, Watch } from "vue-property-decorator";
import DataSource from "devextreme/data/data_source";
import notify from "devextreme/ui/notify";
import DxTabs from "devextreme-vue/tabs";
import { SearchByURL } from "@/utils/search-byurl";
import { RouteLocation } from "vue-router";
import { ApiExceptionShow } from "@/utils/api-exception-show";
import ThemeSwitch from "@/framework/theme-switch/theme-switch";
import { ViewTool } from "@/framework/utils/view-tool";
import DxSortable from "devextreme-vue/sortable";
import LoadElement from "@/framework/utils/load-element";
import Tree from "@/framework/components/tree/tree.vue";
import DrugLengthBase from "./components/drug-length-base.vue";
import DrugSku from "./components/drug-sku.vue";
import { RightContextI } from "@/framework/components/right-menu/right-menu.vue";
import VerticalTabs from "@/framework/components/vertical-tabs/vertical-tabs.vue";
// import Filter from "./components/filter.vue";
import HisToolBar from "./components/tool-bar.vue";
import StoreroomSelect from "./components/storeroom-select.vue";

let formData: any = {};
let self: any;
const settingTabs = [
  {
    id: "AcitivePicture",
    text: "门诊西药房",
    content: "User tab content",
  },
  {
    id: "ProductType",
    text: "住院西药房",
    content: "Comment tab content",
  },
  {
    id: "RepaySetting",
    text: "门诊中成药房",
    content: "Find tab content",
  },
  {
    id: "Agreement",
    text: "住院中成药房",
    content: "Find tab content",
  },
  {
    id: "Agreement",
    text: "中草药房",
    content: "Find tab content",
  },
];
@Options({
  components: {
    DxSortable,
    Tree,
    DxTabs,
    DrugLengthBase,
    DrugSku,
    HisToolBar,
    VerticalTabs,
    StoreroomSelect,
  },
})
export default class StoreLength extends Vue {
  @Inject()
  apiTool: ApiTool;
  @Inject()
  rightContextOption: RightContextI;
  formData: any;
  searchByURL: SearchByURL;
  openTab = 0;
  settingTabs = settingTabs;
  treeData = [
    {
      id: "A",
      parentid: "1",
      name: "測試",
      items: [
        {
          id: "2",
          parentid: "1",
          name: "測試1",
          items: [],
        },
        {
          id: "3",
          parentid: "1",
          name: "測試1",
          items: [],
        },
        {
          id: "4",
          parentid: "1",
          name: "測試1",
          items: [],
        },
      ],
    },
    {
      id: "B",
      parentid: "",
      name: "測試",
      items: [
        {
          id: "B2",
          parentid: "A",
          name: "測試1",
          items: [],
        },
        {
          id: "B3",
          parentid: "A",
          name: "測試1",
          items: [],
        },
        {
          id: "B4",
          parentid: "A",
          name: "測試1",
          items: [],
        },
      ],
    },
  ];
  @Watch("$route.query")
  watchQuery(newVal, oldVal) {
    // if (Tool.sameRoute(newVal, oldVal)) return;
    this.dataSource.reload();
  }
  dataSource = new DataSource({});
  // 页面刷新
  refresh() {
    this.$router.replace({ path: "/refresh" });
  }
}
</script>

<style scoped lang="scss">
.grup-body {
  display: flex;
  // justify-content: space-evenly;
}
.header-input {
  input {
    padding: 0 !important;
  }
}
</style>
